<!DOCTYPE html>
<html>
<head>
	<title>手机商城首页</title>
	<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		
		body,div,span,a,h1,h2,h3,h4,h5,h6,ul,ol,li,table,tr,td,th,p,img{padding: 0px;margin: 0px;}
		ul{list-style: none;}
		#advertisement{width: 100%;height: 85px;background: url("./images/adv.png") no-repeat 0px 0px;background-size: container;}
		#close{width: 30px;height: 30px;background-color: rgba(234,227,232,0.6);float: right;margin-right: 13px;margin-top: 8px;padding-left: 5px;border-radius: 30px;}

		.clear{clear: both;width: 100%;height: 5px;}
/*clear: both;*/

		#container{width: 100%;margin: 0px auto;}

		#header{width: 100%;height: 30px;background-color: #eee;}
		#header ul li{width: 72px;float: left;line-height: 20px;margin-left: 10px;}
		#header ul li a{
			color: #111;
			text-decoration: none;
			line-height: 10px;
			font-size: 12px;
			font-weight: solid;
			text-align:center;
			width: 70px;
			height: 20px;
			display: block;
			padding-top: 10px;
		}
		#header ul li a:hover{
			background-color: #ff6347;
			color: #fff;
		}

		#nav{width: 100%;height: 70px;margin-top: 0px;background-color: #fff;}

		#nav ul li{width: 100px;float: left;line-height: 50px;margin-left: 3px;}
		#nav ul li a{
			color: #333;
			text-decoration: none;
			line-height: 50px;
			font-size: 16px;
			font-weight: solid;
			text-align:center;
			width: 100px;
			height: 50px;
			display: block;
		}
/*display: block;*/
		#nav ul li a:hover{color: #ff6347;}

		#change{width: 100%;height: 500px;overflow: hidden;position: relative;}
		#change ul{position: absolute;list-style: none;}
		#change ul li{height: 500px;}
		
		#change ol{position: absolute;right: 5px;bottom: 10px;list-style: none;}
		#change ol li{
			height: 20px;
			width: 20px;
			background: rgba(245,10,43,0.4);
			border: solid 1px rgba(234,227,232,0.6);
			margin-left: 5px;
			color: #333;
			float: left;
			line-height: center;
			text-align: center;
			cursor: pointer;
		}
		#change ol .on{background: #ff6347;color:#fff;}
/*display: block;*/


		#main{width: 100%;}

		.content{width: 1204px;margin: 30px auto;}
		
		.content .title{text-align: center;}
		
		.content .square{border-top: 3px solid #ff6347;margin-top: 20px;}
		.content .square ul{list-style: none;}
		.content .square ul li{
			height: 278px;
			width: 299px;
			float: left;
			border: solid 1px rgba(234,227,232,0.9);
		}
		.content .square ul li:hover{
			border-top: solid 3px rgba(159,6,40,0.9);
			margin-top: -3px;
		}

		.content .rectangle{margin-top: 20px;}
		.content .rectangle ul{list-style: none;}
		.content .rectangle ul li{
			height: 190px;
			width: 389px;
			float: left;
			padding-right: 5px;

		}

		.content .rectangle div{height: 190px;width: 195px;float: right;background-color: rgba(234,227,232,0.6);padding-left: 10px;color: #333;}
		.content .rectangle div:hover{height: 190px;width: 195px;float: right;background-color: rgba(245,10,63,0.8);color: #ccc}
		
		#footer{width: 100%;height: 400px;background-color: #eee;}
		
		#quality{height: 70px;margin-right: 30px;}
		#quality ul{list-style: none;}
		#quality ul li{
			float: left;
			width: 25%;
			font-size: 14pt;
			line-height: 30px;
			padding-top: 25px;
			text-align: center;
		}

		#service{height: 70px;margin-right: 30px;}
		/*#service div{text-align: center;}*/
		#service div ul{list-style: none;padding-left: 30px;}
		#service div ul li{
			padding-top: 5px;
			padding-left: 5px;
			float: left;
			width: 15%;
			height: 210px;
		}
		#service div ul li h4{
			padding-bottom: 5px;
			color: #444;
		}
		#service div ul li a{
			text-decoration: none;
			color: #333;
			font-size: 10pt;
			line-height: 30px;
		}

	</style>
	<script type="text/javascript">
		window.onload = function(){
		var change = document.getElementById('change'),
		var pic = document.getElementById('pic').getElementsByTagName('li'),
		var list = document.getElementById('list').getElementsByTagName('li'),
		var index = 0,
		var timer = null;
		 
		// 定义并调用自动播放函数
		timer = setInterval(autoPlay, 2000);
		
		// 定义图片切换函数
		function changePic (curIndex) {
			for (var i = 0; i < pic.length; ++i) {
				pic[i].style.display = "none";
				list[i].className = "";
			}
			pic[curIndex].style.display = "block";
			list[curIndex].className = "on";
		}

		// 遍历所有数字导航实现划过切换至对应的图片
		for (var i = 0; i < list.length; i++) {
		 	list[i].onmouseover = function () {
		 	clearInterval(timer);
		 	index = this.innerText - 1;
		 	changePic(index);
		 	};
		};

		function autoPlay () {
			if ( ++index >= pic.length) index = 0;
			changePic(index);
		}

		// 鼠标划过整个容器时停止自动播放
		change.onmouseover = function () {
		 	clearInterval(timer);
		}
		 
		// 鼠标离开整个容器时继续播放至下一张
		change.onmouseout = function () {
			timer = setInterval(autoPlay, 2000);
		}
	};
	</script>
	<script type="text/javascript">
		
		var con = document.getElementById("container");
		var adv = document.getElementById("advertisement");
		var close = document.getElementById("close");

		close.click = function(){
			con.style.top = adv.offsetTop+"px";
			con.style.left = adv.offsetLeft + "px";

			adv.style.display = "none";
		}
		function c(){
			con.style.top = adv.offsetTop+"px";
			con.style.left = adv.offsetLeft + "px";

			adv.style.display = "none";
		}
	</script>
</head>
<body>
	<div id="advertisement">
		<div id="close">
			<i class="fa fa-close fa-2x" onmousedown="c()"></i>
		</div>
	</div>
	<div id="container">
		<div id="header">
			<div style="float: left;">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">华为官网</a></li>
					<li><a href="#">荣耀官网</a></li>
					<li><a href="#">花粉俱乐部</a></li>
					<li><a href="#">V码(优惠码)</a></li>
					<li><a href="#">企业购</a></li>
					<li style="width: 100px;"><a href="#" style="width: 90px;">Select Region</a></li>
					<li><a href="#">更多精彩 >></a></li>
				</ul>
			</div>
			<div style="float: right;padding-right: 10px;">
				<ul>
					<li><a href="#">请登录 注册</a></li>
					<li><a href="#">我的订单</a></li>
					<li><a href="#">客户服务 >></a></li>
					<li><a href="#">网站导航 >></a></li> 
					<li><a href="#">手机版 >></a></li>
					<li><a href="#"><i class="fa fa-shopping-cart"></i>  购物车(0)</a></li>
				</ul>
			</div>
		</div>
		<div id="nav">
			<div style="padding-left: 20px;padding-top: 15px;">
				<img src="./images/VMALL.png" width="130px" style="float: left;">
				<!-- <div style="float: left;"> | </div> -->
				<img src="./images/HUAWEI.png" width="130px" style="float: left;">
			</div>
			
			<ul>
				<li><a href="#">手机</a></li>
				<li><a href="#">笔记本电脑</a></li>
				<li><a href="#">平板&穿戴</a></li>
				<li><a href="#">智能家居</a></li>
				<li><a href="#">配件</a></li>
				<li><a href="#">年货节</a></li>
			</ul>
			<div style="height: 20px;width: 280px;padding: 5px 10px;background-color: #f5f5f5;border-radius: 25px;float: right;margin-right: 30px;margin-top: 10px;">
				<form>
					<input type="text" name="tt" style="width: 260px;height: 18px;float: left;border: none;background-color: #f5f5f5;">
				</form>
				<i class="fa fa-search" style="float: right;"></i>
			</div>
		</div>

		<div class="clear"></div>

		<div id="change">
			 <ul id="pic">
				<li><img src="./images/3.png" alt=""></li>
				<li><img src="./images/1.jpg" alt=""></li>
				<li><img src="./images/3.png" alt=""></li>
				<li><img src="./images/1.jpg" alt=""></li>
				<li><img src="./images/3.png" alt=""></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>

		<div class="clear"></div>

		<div id="main">
			<div class="content">
				<div class="title">
					<img src="">
					<h2>华为精品</h2>
				</div>
				<div class="square">
					<ul>
						<li style="background: url(./images/c1.png) no-repeat;"></li>
						<li style="background: url(./images/c2.png) no-repeat;"></li>
						<li style="background: url(./images/c3.png) no-repeat;"></li>
						<li style="background: url(./images/c4.png) no-repeat;"></li>
					</ul>
				</div>
				<div class="clear"></div>
				<div class="rectangle">
					<ul>
						<li style="background: url(./images/d1.png) no-repeat;">
							<div>
								<br>
								<h3>HUAWEI WATCH</h3>
								<br>
								<h4>稀缺货源 限量发售</h4>
								<br>
								<h4>RMB 1488</h4>
							</div>
						</li>
						<li style="background: url(./images/d2.png) no-repeat;">
							<div>
								<br>
								<h3>HUAWEI MateBook13</h3>
								<br>
								<h4>享3期免息</h4>
								<br>
								<h4>RMB 5399</h4>
							</div>
						</li>
						<li style="background: url(./images/d3.png) no-repeat;">
							<div>
								<br>
								<h3>HUAWEI 畅享9</h3>
								<br>
								<h4></h4>
								<br>
								<br>
								<h4>RMB 999</h4>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div id="footer">
			<div id="quality">
				<ul>
					<li><i class="fa fa-heart fa-2x"></i> 百年企业 品质保证</li>
					<li><i class="fa fa-history fa-2x"></i> 7天退货 15天换货</li>
					<li><i class="fa fa-truck fa-2x"></i> 48元起免运费</li>
					<li><i class="fa fa-signal fa-2x"></i> 1000家维修网点 全国联保</li>
				</ul>
			</div>

			<hr style="width: 96%">

			<div id="service">
				<div style="float: left;width: 75%">
					<ul>
						<li>
							<h4>购物相关</h4>
							<a href="#">购物方式</a><br>
							<a href="#">配送指南</a><br>
							<a href="#">支付方式</a><br>
							<a href="#">常见问题</a><br>
						</li>
						<li>
							<h4>保修与退换货</h4>
							<a href="#">保修政策</a><br>
							<a href="#">退换货政策</a><br>
							<a href="#">退换货流程</a><br>
							<a href="#">保修状态查询</a><br>
							<a href="#">配件防伪查询</a><br>
						</li>
						<li>
							<h4>维修与技术支持</h4>
							<a href="#">售后网点</a><br>
							<a href="#">预约维修</a><br>
							<a href="#">手机寄修</a><br>
							<a href="#">备件价格查询</a><br>
							<a href="#">上门服务</a><br>
						</li>
						<li>
							<h4>特色服务</h4>
							<a href="#">防伪查询</a><br>
							<a href="#">补够保障</a><br>
							<a href="#">以旧换新</a><br>
							<a href="#">礼品包装</a><br>
						</li>
						<li>
							<h4>关于我们</h4>
							<a href="#">公司介绍</a><br>
							<a href="#">华为商城简介</a><br>
							<a href="#">华为线下门店</a><br>
							<a href="#">荣耀线下门店</a><br>
							<a href="#">诚征英才</a><br>
							<a href="#">意见反馈</a><br>
						<li>
							<h4>友情链接</h4>
							<a href="#">华为集团</a><br>
							<a href="#">华为CBG官网</a><br>
							<a href="#">荣耀官网</a><br>
							<a href="#">花粉俱乐部</a><br>
							<a href="#">网站地图</a><br>
						</li>
					</ul>
				</div>
				<div style="float: right;width: 25%;text-align: center;">
					<br>
					<h2>400-088-6888</h2>
					<br>
					<h5>7x24小时客服热线（仅收市话费）</h5>
					<br>
					<div style="width: 100px;height: 30px;text-align: center;border-radius: 15px;background-color: #222;color: #ccc;margin: 0px auto;padding-top: 5px;">
						<a href="#" style="text-decoration: none;color: #ccc;">在线客服</a> 
					</div>
					<br>
					<h5>
						关注VMALL:&nbsp;&nbsp;
						<i class="fa fa-volume-control-phone"></i>&nbsp;&nbsp;
						<i class="fa fa-universal-access"></i>&nbsp;&nbsp;
						<i class="fa fa-question-circle-o"></i>&nbsp;&nbsp;
						<i class="fa fa-wifi"></i>  
					</h5>
				</div>
			</div>

			<hr style="width: 96%">

			<div id="copyright">
				<div style="float: left;width: 5%;padding-left: 23px;padding-top: 18px;color: #222;font-size: 20pt;">
					VMALL
				</div>
				<div style="float: left;width: 70%;padding-left: 40px;padding-top: 18px;color: #222;font-size: 10pt;">
					华为集团&nbsp;&Iota;&nbsp;华为CBG官网&nbsp;&Iota;&nbsp;荣耀官网&nbsp;&Iota;&nbsp;花粉俱乐部&nbsp;&Iota;&nbsp;华为应用市场&nbsp;&Iota;&nbsp;EMUI&nbsp;&Iota;&nbsp;华为终端云空间&nbsp;&Iota;&nbsp;开发者联盟&nbsp;&Iota;&nbsp;华为商城手机版&nbsp;&Iota;&nbsp;网站地图
					<br>
					隐私声明&nbsp;服务协议&nbsp;COOKIES&nbsp;Copyright&nbsp;&copy;&nbsp;2012-2019&nbsp;华为软件技术有限公司&nbsp;版权所有&nbsp;保留一切权利 公安备案&nbsp;苏公网安备32011402010009号
					<br>
					苏ICP备17040376号-6 增值电信业务经营许可证：苏B2-20130048号&nbsp;&Iota;&nbsp;网络文化经营许可证：苏网文[2015] 1599-026号
				</div>
				<div style="float: left;width: 15%;padding-left: 50px;padding-top: 18px;">
					<a href="#"><img src="./images/copy1.jpg" style="width: 80px;"></a>
					<a href="#"><img src="./images/copy2.png" style="width: 80px;"></a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>